import Vue from 'vue'

// base.css 样式重置相关的代码封装好了 上传到了npm  提供给所有人下载使用
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

// 让这个文件和main.js 入口文件产生关联(webpack打包会基于这个依赖关系)
// 只有和main.js有直接或者间接关系的  才会打包
import '@/styles/index.scss' // global css
// @import './variables.scss';
// @import './mixin.scss';
// @import './transition.scss';
// @import './element-ui.scss';
// @import './sidebar.scss';

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI) // 移动端项目一般是对普通用户 注重体验  pc后台管理系统 都是自己人在用 / 7788

Vue.config.productionTip = false

// 实例化vue  用App根组件渲染#app盒子
new Vue({
  el: '#app',
  router, // 路由
  store, // 仓库
  render: h => h(App)
})

/*
1. 衔接之前的内容(假期作业的整理) vuex  人资架构(不是我们搭建的  花哥)
2. 后续的内容

vuex
 - 是什么 => 状态(数据)管理工具
 - 为什么 => 便于数据共享 / 响应式
 - 怎么用 =>
     state(共享的)
     mutation(同步方法 用于修改状态)
     action(异步方法 用于处理异步耗时操作 还是得提交mutation)
     getters(类似计算属性)

     mudules(拆分仓库模块)
        state
        mutation: { xxx(state, val) {} }
        action: { xxx(context, val) {} }
        getters: { xxxx(state) { return 999 } }
        namespaced(开启命名空间)

     $store.state.模块名.xxx
     computed: { ...mapState('模块名', ['xxx']) }

     $store.commit('模块名/mutation名', 一个参数)
     methods: { ...mapMutations('模块名', ['xxx']) }

     $store.dispatch('模块名/action名', 一个参数)
     methods: { ...mapActions('模块名', ['xxx']) }

     $store.getters['模块名/getter名']
     computed: { ...mapGetters('模块名', ['xxxx']) }

*/
